
//获取React中的DOM 
import { useRef } from "react";
import { v4 as uuid} from 'uuid';  // 使用  npm install uuid 安装  使用  uuid();  例如：3312a9e2-011b-49ac-b780-a4ebd537e32a
import dayjs from 'dayjs'; //使用 npm install dayjs 安装



// 使用场景  获取元素尺寸、滚动位置

function Fn_useRef(){
        /**
         * 步骤
         * 1、useRef生成ref对象 绑定到dom标签上
         * 2、dom可用时，ref.current获取DOM
         * 渲染完毕后dom生成之后可用
         */
     const inputV = useRef(null);
     const btnDom =()=>{
        console.log(inputV.current);   //获取后的样子  <input type="text">
        console.log(inputV.current.value); //  value 值  
        console.dir(inputV.current); 

        //console.dir()方法可以在控制台显示指定javascript对象的属性。打印出该对象的所有属性和属性值. 
     }
     console.log(uuid(),'uuid')
    return (
        <div>
            <input type="text" ref={inputV} />
            <button onClick={btnDom}>获取Dom节点</button>
            <p>随机uuid：{uuid()}</p>
            <p>{dayjs(new Date()).format('YYYY/MM/DD HH:mm:ss')}</p>
        </div>
    )
}
export default(Fn_useRef)